<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport"        
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>商城</title>
    <!-- <link rel="stylesheet" href="../public/css/1.css"> -->
    <link rel="stylesheet" href="../public/css/2.css">
    <link rel="stylesheet" href="../public/css/reset.css" />
    <link rel="stylesheet" href="../public/css/all_use.css" />
    <link rel="stylesheet" href="../public/css/footer.css">
    <script src="../public/js/utils/utils.js"></script>
    <!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
</head>
<style>
</style>

<body>
    <div id="app">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,i) in swiperlist" :key="i">
                <img :src="item.image" class="img" />
            </van-swipe-item>
        </van-swipe>
        <div class="spk">
            <div class="sp" v-for="(ite,i) in dataList" :key="i" @click="router1(ite.id,account.openId)" v-if="ite.spstate==0">
                <img :src="ite.img[0]" class="tp">
                <div class="spmc">{{ite.spname}}</div>
                <div class="jg">￥{{ite.price}}</div>
                <div class="gm">购买</div>
            </div>
        </div>
    </div>
</body>
<script type="module">
    import ajax from "../public/js/api/api.js";
    var app = new Vue({
        el: '#app',
        data: {
            swiperlist: [],
            dataList: [],
            account: {},
            
        },
        created() {
            this.selectAll();
            this.findByCommodity();
        },
        methods: {
            /**
             * 轮播图
             */
            selectAll() {
                ajax
                    .selectAll({
                        id: this.swiperlist.id
                    })
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.swiperlist = res.data.data
                        }
                    })
            },
            findAccountById: function (openid) {
                if (openid !== undefined) {
                    ajax
                        .findAccountById({
                            openId: openid
                        })
                        .then((res) => {
                            if (res.data.code == 0) {
                                this.account = res.data.data;
                            }
                        })
                }
            },
            /**
             * 查询所有商品
             */
            findByCommodity() {
                var that = this;
                ajax
                    .findByCommodity()
                    .then((res) => {
                        if (res.data.code == 0) {
                            var dataList = res.data.data
                            // that.imgList = res.data.data.spimage.split(",")[0]; 
                            console.log(res.data.data,"----");
                            dataList.forEach(element => {
                                var img = element.spimage.split(",");
                                element.img = img;
                            });
                            this.dataList = dataList;
                            console.log(this.dataList,"+++++");
                        }
                    })
            },
            router1(id, openId) {
                window.location.href = `./detail.html?id=${id}`;
            },
        }
    })
</script>
<style>
    .my-swipe .van-swipe-item {
        color: #fff;
    }

    .img {
        height: 200px;
        width: 100%;
    }
</style>

</html>